<template>
  <section>
    <el-row>
      <el-col :span="24" class="header">
        <el-col :span="10">
          {{logoInfo}}
        </el-col>
        <el-col span="10">
          
        </el-col>
        <el-col :span="4">
          {{userName}}
        </el-col>
      </el-col>
      <el-col :span="24" class="main">
        <aside>
          <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect"
             unique-opened router v-show="!collapsed"  theme="dark">
            <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
              <el-submenu :index="index+''" v-if="!item.leaf">
                <template slot="title">
                  <i :class="item.iconCls"></i>{{item.name}}
                </template>
                <el-menu-item v-for="child in item.children" :key="item.name" :index="child.path" v-if="!child.hidden" style="height: 35px; line-height: 35px;">{{child.name}}</el-menu-item>
              </el-submenu>
              <el-menu-item v-if="item.leaf&&item.children&&item.children.length" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
            </template>
          </el-menu>
        </aside>
      </el-col>
    </el-row>
  </section>
</template>

<script>
  export default {
    data () {
      return {
        logoInfo: 'AO',
        userName: 'Harry'
      }
    },
    methods: {
      handleopen () {
      },
      handleclose () {
      },
      handleselect () {
      }
    }
  }
</script>

<style lang="less" scoped>
  
</style>
